<template>
  <view class="image-select-page">
    <view class="image-container" v-if="imageUrl || !imageUrl">
      <image 
        :src="imageUrl || placeholderImage" 
        mode="aspectFill" 
        class="circle-image"
      ></image>
      <text class="placeholder-text" v-if="!imageUrl">点击下方按钮选择图片</text>
    </view>
    <button @click="chooseAndPreviewImage" class="choose-btn">选择本机图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', 
      placeholderImage: '/static/empty.png'
    }
  },
  methods: {
    chooseAndPreviewImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          this.imageUrl = tempFilePath
          uni.previewImage({
            current: tempFilePath,
            urls: [tempFilePath]
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.image-select-page {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2rpx solid #eee;
  position: relative;
  margin-bottom: 20rpx;
}

.circle-image {
  width: 100%;
  height: 100%;
}

.placeholder-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22rpx;
  color: #999;
  text-align: center;
  width: 160rpx;
}

.choose-btn {
  background-color: #007AFF;
  color: #fff;
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  margin-top: 10rpx;
}
</style>